<template>
	<view class="matching-container">
		<view class="matching-header">
			<text class="title">遇见搭子</text>
			<view class="close-btn" @click="handleClose">
				<u-icon name="close" color="#fff" size="24"></u-icon>
			</view>
		</view>

		<view class="matching-content">
			<view class="loading-animation">
				<!-- <u-loading-icon mode="circle" size="80" color="#722ED1"></u-loading-icon> -->
				<view class="panda-icon">
					<image src="/static/images/panda.png" mode="aspectFit"></image>
				</view>
				<view class="matching-dots">
					<text class="dot" :class="{ active: dotIndex === 0 }"></text>
					<text class="dot" :class="{ active: dotIndex === 1 }"></text>
					<text class="dot" :class="{ active: dotIndex === 2 }"></text>
				</view>
			</view>
			<text class="matching-text">遇见中...</text>
		</view>

		<view class="cancel-btn-container">
			<u-button type="default" shape="round" @click="cancelMatching"
				:custom-style="{ borderColor: '#722ED1', color: '#722ED1', backgroundColor: 'transparent' }">取消匹配</u-button>
		</view>
	</view>
</template>

<script>
import { joinMatching, checkMatchingResult, cancelMatching } from '@/api/partner.js'
import { mapGetters, mapActions, mapState } from 'vuex';
export default {
	data() {
		return {
			dotIndex: 0,
			matchingTimer: null,
			dotTimer: null
		};
	},
	onLoad() {
		this.startMatching();
		this.startDotAnimation();
	},
	onUnload() {
		this.stopMatching();
		this.stopDotAnimation();
	},
	computed: {
		currentLocation() {
			return this.getLocation;
		},
		// 使用mapGetters获取全局状态
		...mapGetters([
			'getGaodeKey',
			'getSiteName'
		]),

		// 使用mapState直接访问state
		...mapState({
			globalConfig: state => state.config,
			userLocation: state => state.location,
			userInfo: state => state.userInfo,
		})
	},
	methods: {
		startMatching() {
			// 调用加入匹配接口
			joinMatching({
				longitude: this.userLocation.longitude,
				latitude: this.userLocation.latitude,
			})
				.then(res => {
					console.log(res);
					if (res.data.code == 1) {
						const userId = res.data.data.id;
						if (!userId) {
							uni.showToast({ title: '用户信息获取失败', icon: 'none' });
							return;
						}
						uni.redirectTo({ url: `/pages/other/profile?id=${userId}` })
					} else {
						uni.showToast({
							title: res.data.msg || '加入匹配失败',
							icon: 'none'
						});
						uni.navigateBack();
					}
				})
				.catch((err) => {
					console.log(err);

					uni.showToast({
						title: '网络错误，无法加入匹配',
						icon: 'none'
					});
					uni.navigateBack();
				});
		},
		startCheckResult() {
			// 轮询检查匹配结果
			checkMatchingResult()
				.then(res => {
					// 关闭之前的轮询
					this.stopMatching();
					console.log(res.data, 'checkMatchingResult');
					if (res.data.code == 1) {
						if (res.data.data) {
							this.stopMatching();
							uni.navigateTo({
								url: `/pages/partner/match-result?result=${encodeURIComponent(JSON.stringify(res.data.data))}`
							});
						} else {
							this.stopMatching();
							uni.showToast({
								title: res.data.msg || '匹配已结束',
								icon: 'none'
							});
							uni.navigateBack();
							return false;
						}
					} else {
						uni.showToast({
							title: res.data.msg || '检查匹配结果失败',
							icon: 'none'
						});
						this.matchingTimer = setInterval(() => {
							this.startCheckResult()
						}, 2000);
					}
				})
				.catch(() => {
					this.stopMatching();
					uni.showToast({
						title: '网络错误，无法检查匹配结果',
						icon: 'none'
					});
				});
		},
		stopMatching() {
			if (this.matchingTimer) {
				clearInterval(this.matchingTimer);
				this.matchingTimer = null;
			}
		},
		startDotAnimation() {
			this.dotTimer = setInterval(() => {
				this.dotIndex = (this.dotIndex + 1) % 3;
			}, 500);
		},
		stopDotAnimation() {
			if (this.dotTimer) {
				clearInterval(this.dotTimer);
				this.dotTimer = null;
			}
		},
		cancelMatching() {
			cancelMatching()
				.then(res => {
					if (res.data.code === 1) {
						this.stopMatching();
						uni.navigateBack();
					} else {
						uni.showToast({
							title: res.data.msg || '取消匹配失败',
							icon: 'none'
						});
					}
				})
				.catch(() => {
					uni.showToast({
						title: '网络错误',
						icon: 'none'
					});
				});
		},
		handleClose() {
			uni.navigateBack();
		}
	}
};
</script>

<style scoped>
.matching-container {
	height: 100vh;
	background-color: #000;
	padding: 0 30rpx;
	box-sizing: border-box;
}

.matching-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 110rpx;
	margin-bottom: 120rpx;
}

.title {
	color: #fff;
	font-size: 36rpx;
	font-weight: bold;
}

.close-btn {
	width: 60rpx;
	height: 60rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.matching-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 1;
}

.loading-animation {
	position: relative;
	width: 200rpx;
	height: 200rpx;
	margin-bottom: 40rpx;
}

.panda-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 120rpx;
	height: 120rpx;
}

.panda-icon image {
	width: 100%;
	height: 100%;
}

.matching-dots {
	display: flex;
	justify-content: center;
	gap: 15rpx;
	margin-top: 40rpx;
}

.dot {
	width: 15rpx;
	height: 15rpx;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.3);
	transition: all 0.3s ease;
}

.dot.active {
	background-color: #722ED1;
	transform: scale(1.3);
}

.matching-text {
	color: #fff;
	font-size: 32rpx;
	margin-top: 20rpx;
}

.cancel-btn-container {
	padding: 40rpx 0;
}

.cancel-btn-container>>>.u-button {
	height: 90rpx;
	font-size: 32rpx;
	border-radius: 45rpx;
	border-width: 2rpx;
}
</style>